<!--复选框-->
<template>
  <div class="example">
    <zz-talk
      :isWeqiaNo = true
      :isInside = true
      :isFoot = true
      :isBorder = false
      background="#fff"
      @sendData="subData"></zz-talk>
    <div class="tableClass mt20">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
        <tr>
          <td><pre>{{state}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        state: '',
        stateData: '',
        valueData: {id: 1},
        checkEd: true,
        option: {
          1: '如果除了状态 还是传其它的值 需要在data里面设置 （下有示例）',
          2: 222
        },
        explameCall: `<zz-talk
          innerPropsText= ""  默认显示的文字
          width='100%' 输入框宽度
          height='100px' 输入框高度
          position='bottom' @人员 表情位置
          :isTip="true" 操作栏是否显示提示语 默认显示
          :isKeyup="true" 是否直接Enter键 发送 默认true
          :isFocus="true" 是否自动设置光标 发送 默认true
          :isSimple="true" 是否开启简单模式 发送 默认false
          :isUpload="true" 是否打开上传按钮 默认true
          :isFace="true" 是否打开表情 默认true
          :isAt="true" 是否打开@人员 默认true
          :isHeight="false" 是否开启高度自动缩放 默认false
          :isFoot="true" 是否显示底部 默认true
          :isBorder="true" 是否显示边框 默认true
          :isWeight="false" 是否加粗字体
          :isAtAll="false" @人员时 是否用选择人的组件 默认false
          :padding="[0, 0, 0, 0]" 是否显示边框 默认true
          :fileType="[]" 上传文件类型 ，默认全部
          :isBlur="false" 鼠标离开时，是否触发事件
          :isWeqiaNo="false" @员工时是否用工号
          :required="true" 是否必填
          :isInside="false" 操作按钮是否放在里面
          :max="1000" 输入的最大字数 默认1000
          :auth = {
            url: url,

            queryName: ‘query.projectId’,  请求的字段
            id: projectId 请求的参数

            或者
            query: [{key: 'query.projectId', value: projectId}]

          }  是否从某个接口拉取@人员
          localId="xxx" 本地临时存储的localStorage的id 默认没有填写，不保存内容在本地， 设置id之后会自动保存
          parentId="" 评论时， 回复的评论Id
          upReplyId="" 评论时， 评论人的Id
          upReplyName="" 评论时， 评论人的名字
          @sendData="sendData" 获取内容
          @blur="blur" 光标离开获取内容
          background="#f6fcfc" 背景颜色
          ></zz-talk>`,

        explameMethods:
          `handleChange (state) {
            this.state = state
            console.log(this.state)
          },
          handleChangeData (data) {
            let {state, value} = data
            console.log(state, value)
          }`
      }
    },
    methods: {
      subData (state) {
        this.state = state
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 70%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
